import React from "react";

export default class BindInputValue extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: "jay",
    };
  }
  render() {
    return (
      <div className="text-center text-danger ">
        <span>BindInputValue组件</span>
        <div>
          {" 文本框没有提供 onChange 事件，否则是只读"}
          <input
            ref="txt"
            type="text"
            className="d-block"
            value={this.state.msg}
            onChange={(e) => {
              this.fun1(e);
            }}
          />
        </div>
        <button onClick={(e) => {}}>修改</button>
      </div>
    );
  }
  fun = () => {
    this.setState({
      msg: "james",
    });
  };
  fun1 = (e) => {
    //   获取值方式1
    // console.log(e.target.value);
    //   获取取方式2
    console.log(this.refs.txt);
    //把ui上的值获取到，设置回去
    this.setState({
      msg: e.target.value,
    });
  };
}

// 单向数据流 代表 小程序 react
// 概念：只能将页面的state或者data，单向同步到页面上。但是页面中的数据改变了，不能做到页面中state/data-数据更新

// 双向数据流 代表 vue
// 概念：UI上绑定页面上的数据可以同步，同事UI中的数据修改了，data中的数据也能同步修改
